<template>
    <div class="page-container">
        <el-row :gutter="24">
            <!-- 图形化 -->
            <el-col :span="10">
                <el-card class="box-card centent">
                    <!-- 数据集成 -->
                    <th style="border: 1px solid #000000; margin: 0 auto;">
                        <tr>
                            <td style="border: 1px solid #000000; width: 180px;">{{ YearData }}年度总预算（元）</td>
                            <td style="border: 1px solid #000000; width: 180px;">年度累计支出（元）</td>
                            <td style="border: 1px solid #000000; width: 180px;">年度可支出（元）</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #000000; width: 180px; color: red;">
                                {{amountData.yearNum.yearBudget ? amountData.yearNum.yearBudget : 0 }} ￥</td>
                            <td style="border: 1px solid #000000; width: 180px; color: red;">
                                {{amountData.yearNum.amountPaid ? amountData.yearNum.amountPaid : 0 }} ￥</td>
                            <td style="border: 1px solid #000000; width: 180px; color: red;">
                                {{amountData.yearNum.yearBudget?amountData.yearNum.yearBudget - amountData.yearNum.amountPaid:0}} ￥</td>
                        </tr>
                    </th>

                    <!-- 饼图 -->
                    <div id="myEChartsBar" style="margin-top: 50px;"></div>
                </el-card>
            </el-col>
            <!-- 数据化 -->
            <el-col :span="14">
                <el-card class="box-card right-table-box">
                    <div v-for="(tableData, index) in classList" :key="index" style="margin-bottom: 60px;">
                        <el-row :gutter="20">
                            <el-col :span="5">
                                活动类型：{{ tableData.name }}
                            </el-col>
                            <el-col :span="5">
                                费用限额：{{ tableData.budget }}
                            </el-col>
                            <el-col :span="5">
                                累计支出：{{ tableData.paid }}
                            </el-col>
                            <el-col :span="5">
                                余额：{{ tableData.budget - tableData.paid }}
                            </el-col>
                        </el-row>
                        <el-table :data="tableData.list" border style="width: 100%; margin-top: 5px;" :header-cell-style="rowClass">
                            <el-table-column prop="twoActivityName" label="实施场景（二级分类）" />
                            <el-table-column prop="name" label="活动主题" />
                            <el-table-column label="活动期间">
                                <el-table-column prop="startTime" />
                                <el-table-column prop="endTime" />
                            </el-table-column>
                            <el-table-column prop="amountPaid" label="实际支出" />
                            <el-table-column prop="addNumber" label="获得线索数量" />
                            <el-table-column label="线索单价/元">
                                <template #default="scope">
                                    <span v-if="scope.row.amountPaid != 0 && scope.row.addNumber != 0">
                                        {{ scope.row.amountPaid / scope.row.addNumber }}
                                    </span>
                                    <span v-else>0</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="concludeMoney" label="现场成交金额" />
                            <el-table-column prop="remark" label="备注" />
                        </el-table>
                    </div>
                </el-card>
            </el-col>

            <!-- 底部数据总表 -->
            <el-col :span="24" style="margin-top: 20px;">
                <el-card class="box-card">
                    <el-table :data="allTableList" border style="width: 100%">
                        <el-table-column prop="slogan" label="广告宣传语"/>
                        <el-table-column prop="productNames" label="促销产品信息"/>
                        <el-table-column prop="name" label="活动主题" />
                        <el-table-column prop="oneActivityName" label="活动分类（一级）" width="150"/>
                        <el-table-column prop="twoActivityName" label="活动分类（二级）" width="150"/>
                        <el-table-column prop="month" label="推广月份" />
                        <el-table-column prop="address" label="使用场景" />
                        <el-table-column prop="amountPaid" label="支出总额" />
                        <el-table-column prop="addNumber" label="获得线索数量" />
                        <el-table-column prop="concludeMoney" label="现场成交金额" />
                        <el-table-column label="线索单价/元">
                            <template #default="scope">
                                <span v-if="scope.row.amountPaid != 0 && scope.row.addNumber != 0">
                                    {{ scope.row.amountPaid / scope.row.addNumber }}
                                </span>
                                <span v-else>0</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" />
                    </el-table>   
                    <div class="page-block">
                        <el-pagination v-model:currentPage="search.current" v-model:page-size="search.size" :page-sizes="[10, 20, 30, 40]"
                            :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                            :total="search.total" :hide-on-single-page="true" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </el-card>                             
            </el-col>            
        </el-row>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, inject } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'StatisticsList',
    setup(props, context) {
        const state = reactive({
            // 年
            YearData: new Date().getFullYear(),
            // 左侧总计
            amountData: {
                names: [],
                values: [],
                yearNum: {}
            },
            // 分页查询
            search: {
                current: 1,
                size: 10,
                total: 0
            },
            // 右侧一级分类数据
            classList: [],
            // 底部数据
            allTableList: []

        })
        // 声明定义一下echart
        let echart = inject("echarts");
        // 渲染饼图
        function initChart() {
            // 获取组件实例
            const myEChart = echart.init(document.getElementById("myEChartsBar"));
            const option = {
                title: {
                    text: state.YearData + '年度预算',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    // data: ["网络广告（335）", '年会/订货会（435）', '展会（510）', '弹性支出（735）', '传统媒体（1548）', '冲冲冲（1235）']
                    data: state.amountData.names
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        // data: [
                        //     { value: 1235, name: '冲冲冲（1235）' },
                        //     { value: 1548, name: '传统媒体（1548）' },
                        //     { value: 735, name: '弹性支出（735）' },
                        //     { value: 510, name: '展会（510）' },
                        //     { value: 434, name: '年会/订货会（435）' },
                        //     { value: 335, name: '网络广告（335）' }
                        // ],
                        data: state.amountData.values,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }

            myEChart.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                myEChart.resize();
            });
        }

        // 表头合并
        const rowClass = ({ row, column, rowIndex, columnIndex }) => {
            if (rowIndex === 1) {
                return {
                    display: 'none'                    
                }
            }
        }

        // 改变页大小
        const handleSizeChange = (e) => {
            state.search.size = e
            marketAllList()           
        }
        // 改变当前页
        const handleCurrentChange = e => {
            state.search.current = e
            marketAllList()
        }
        // 获取饼图数据
        const getChartData = () => {
            api.getEcharts().then(res => {
                state.amountData = res.data
                initChart()
            })
        }
        // 获取一级分类数据
        const classGroup = () => {
            api.classGroup().then(res => {
                state.classList = res.data
            })
        }
        // 获取列表数据
        const marketAllList = () => {
            api.marketAllList(state.search).then(res => {
                state.allTableList = res.data.records
                state.search.total = res.data.total
            })
        }

        onMounted(() => {
            getChartData()
            classGroup()
            marketAllList()
        })
        return {
            ...toRefs(state),
            initChart,
            handleSizeChange,
            handleCurrentChange,
            classGroup,
            marketAllList,
            rowClass,
        }
    }
}
</script>

<style lang="scss">
.centent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#myEChartsBar {
    max-height: 500px;
    // max-height: 400px;
    height: 500px;
}

.right-table-box{
    height: 635px;
    overflow-y: scroll;
}
</style>